<template>
  <div class="title-bar" @mousedown="handleMouseDown">
    <!--  LightBox AI助手 -->
    <div class="logo">🚀 {{ $t('aiChat.title') }}</div>
    <button class="close-btn" @click="closeWindow">✕</button>
  </div>
</template>

<script setup lang="ts">
import useWindowDrag from '@/hooks/useMouseDown'
import ipcMainApi from '@/ipcMainApi'

let { handleMouseDown } = useWindowDrag('aiChat-window')

const closeWindow = (): void => {
  ipcMainApi.aiChatApi.closeAichatWindow()
}

</script>

<style lang="scss" scoped>
.title-bar {
  width: 100%;
  height: 40px;
  background-color: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 16px;
  cursor: pointer;
}

.title-bar .logo {
  font-size: 16px;
  font-weight: bold;
  user-select: none;
}

.title-bar .close-btn {
  -webkit-app-region: no-drag; /* 让按钮可点击 */
  cursor: pointer;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 16px;
}
</style>
